<template>
    <!-- 带内容的分享 -->
    <div class="share-info-component-container">
        <a v-if="pics!=''" class="share-info-component-logo" :href="detailUrl">
            <img v-lazy="pics"/>  <!-- 图片压缩处理 -->
        </a>
        <div class="share-info-component-close" @click="closeLayer()">×</div>
        <a class="share-info-component-info" :href="detailUrl">{{title}}</a>
        <div class="clearBoth"></div>
    </div>
</template>

<script>
    export default {
        props: {
            pics: {
                type: String,
                default: ""
            },
            title: {
                type: String,
                default: ""
            },
            detailUrl:{
                type:String,
                default:"javascript:void(0);"
            }
        },
        methods: {
            closeLayer: function () {
                if(this.$route.name=="Live"){
                    $(".edit-component-container").css("bottom","0");
                    $(".edit-takeup").css("height","3.8rem");
                    $("#live_hall_container").css("padding-bottom","0");
                }
                this.$emit("close", false);
            }
        }
    }
</script>

<style>
    .share-info-component-container {
        width: 100%;
        background-color: rgba(0,0,0,0.75);
        color: #FFF;
        padding: 0.3rem 1.0rem;
         padding-right: 0.3rem;
        box-sizing: border-box;
        height: 100%;
    }

    .share-info-component-logo {
        display: block;
        float: left;
        height: 2.7rem;
        width: 3.6rem;
        border-radius: 0.3rem;
    }

    .share-info-component-logo img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        border-radius: 0.3rem;
    }

    .share-info-component-info {
        display: block;
        float: left;
        margin-left: 2%;
        font-size: 0.875rem;
        color: #FFF;
        text-decoration: none;
        line-height: 1.35rem;
        width: 62%;

        overflow: hidden;
        text-overflow: ellipsis;
        /*white-space: nowrap;*/
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .share-info-component-close {
        width: 6%;
        float: right;
        text-align: right;
        font-size: 1.5rem;
        line-height: 2.5rem;
        margin-right: 5%;
    }
</style>